import React, { Component } from 'react';
import "../styles/Signin.scss"
import { NavBar, Steps } from 'antd-mobile'
const { Step } = Steps

class Signin extends Component {
    render() {
        return (
            <div className='signin'>
                <NavBar className='navbar' right={"积分明细"} onBack={() => { this.props.history.go(-1) }}>我的积分</NavBar>
                <div className="box">
                    <p className="p1">可用积分</p>
                    <p className="p2">100</p>
                    <div className="step">
                        <div className="title">每日签到</div>
                        <Steps current={1}>
                            <Step status='finish' title='1天' />
                            <Step title='2天' />
                            <Step title='3天' />
                            <Step title='4天' />
                            <Step title='5天' />
                            <Step title='6天' />
                            <Step title='7天' />
                        </Steps>
                        <div className="btn">
                            <span>签到领积分</span>
                        </div>
                    </div>
                </div>
                <div className="useintegral">
                    <div className="title">
                        <span>一</span>  积分兑卷 <span>一</span>
                    </div>
                    <div className="list">
                        <div className="item">
                            <div className="top">
                                <div className="left">￥ <span>10</span></div>
                                <div className="right">
                                    <p>全场通用</p>
                                    <p>满300使用</p>
                                </div>
                                <div className="circular circular1"></div>
                                <div className="circular circular2"></div>
                            </div>
                            <div className="bottom">
                                <div className="btn">
                                    <span>200积分兑换</span>
                                </div>
                            </div>
                        </div>
                        <div className="item">
                            <div className="top">
                                <div className="left">￥ <span>10</span></div>
                                <div className="right">
                                    <p>全场通用</p>
                                    <p>满300使用</p>
                                </div>
                                <div className="circular circular1"></div>
                                <div className="circular circular2"></div>
                            </div>
                            <div className="bottom">
                                <div className="btn">
                                    <span>200积分兑换</span>
                                </div>
                            </div>
                        </div>
                        <div className="item">
                            <div className="top">
                                <div className="left">￥ <span>10</span></div>
                                <div className="right">
                                    <p>全场通用</p>
                                    <p>满300使用</p>
                                </div>
                                <div className="circular circular1"></div>
                                <div className="circular circular2"></div>
                            </div>
                            <div className="bottom">
                                <div className="btn">
                                    <span>200积分兑换</span>
                                </div>
                            </div>
                        </div>
                        <div className="item">
                            <div className="top">
                                <div className="left">￥ <span>10</span></div>
                                <div className="right">
                                    <p>全场通用</p>
                                    <p>满300使用</p>
                                </div>
                                <div className="circular circular1"></div>
                                <div className="circular circular2"></div>
                            </div>
                            <div className="bottom">
                                <div className="btn">
                                    <span>200积分兑换</span>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        );
    }
}

export default Signin;